<template>
  <tree :data="data" />
  <div class="rightContent d-flex">
    <div class="icons">
      <div
        v-for="(item, index) in data.crops"
        :key="index"
        class="iconInfo d-flex ai-center"
      >
        <div
          :class="[
            'icon',
            `bg-color-${item.background}`,
            `bd-color-${item.background}`,
          ]"
        ></div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
    <div>
      <div class="chart">
        <div class="d-flex ai-center mb-4">
          <div class="chartTitle">遥感涨势监测</div>
          <div class="chartSelect d-flex ai-center">
            <p class="font-num mr-2">2022.07.18遥感</p>
            <div class="arrowD"></div>
          </div>
        </div>
        <div class="chartSelect d-flex-inline ai-center mb-2">
            <p class="font-num mr-2">全部作物</p>
            <div class="arrowD"></div>
        </div>
        <div class="mb-2">
          <span class="font-lan">预测平均亩产:</span>
          <span class="number-l text-info-1">320</span>
          <span class="description">公斤</span>
        </div>
        <pieChartL :data="percents" />
        <el-row class="carousel mt-3" :gutter="16">
          <el-col v-for="(index) in 6" :key="index" :span="12" class="mb-3">
            <div class="carouselImg"></div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted } from "vue";
import pieChartL from "@/chart/pieChart/pie-legend";
import tree from "@/components/tree/tree.vue";
export default defineComponent({
  components: {
    tree,
    pieChartL
  },
  setup() {
    //变量
    const data = reactive({
      select: "多元比对数据",
      list: [
        {
          name: "确权数据",
          children: [
            {
              name: "春播适宜区",
            },
          ],
        },
        {
          name: "作物分布",
          children: [
            {
              name: "玉米",
            },
            {
              name: "青椒",
            },
            {
              name: "土豆",
            },
          ],
        },
      ],
      crops: [
        { name: "适宜播种", background: "lightGreen" },
        { name: "较适宜播种", background: "paleBlue" },
        { name: "已过适宜时间", background: "lightBlue" },
        { name: "不适宜播种", background: "lightGray" },
      ],
    });
    const percents = ref([
      {
        name: "优质",
        value: 25,
        count:'2586',
        color:'rgba(46, 88, 229, 1)'
      },
      {
        name: "良好",
        value: 15,
        count:'2586',
        color:'rgba(128, 92, 229, 1)'
      },
      {
        name: "普通",
        value: 40,
        count:'2586',
        color:'rgba(229, 138, 46, 1)'
      },
    ]);
    // 生命周期
    onMounted(() => {
      //
    });

    onUnmounted(() => {
      //
    });

    //methods

    // return
    return {
      data,
      percents
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.rightContent {
  position: absolute;
  top: 24px;
  right: 24px;
  .icons {
    margin-right: 24px;
    .iconInfo {
      margin-bottom: 8px;
      .icon {
        width: 16px;
        height: 16px;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        margin-right: 8px;
      }
      .name {
        font-size: 12px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #ebeff5;
        line-height: 16px;
        -webkit-background-clip: text;
      }
    }
  }
}
</style>
